<template>
  <TopNav title="查看患者档案"/>
  <div class="container">
    <!--患者信息 start-->
    <el-card class="patient-info">
      <h1>{{ patientDesc.patientName }}</h1>
      <h2>
        <span>{{ patientDesc.patientSex }}</span>
        <span>{{ patientDesc.patientAge }}</span>
      </h2>
      <p><span>身高</span>{{ patientDesc.height }}cm</p>
      <p><span>体重</span>{{ patientDesc.weight }}kg</p>
      <el-button class="button" size="small" round color="#e8bf6a"> {{ patientDesc.disease }}</el-button>
    </el-card>
    <!--患者信息 end-->
    <!--  操作 start-->
    <CardList :list="cardList"/>
    <!--  操作 end-->
    <!--评估信息 start-->
    <el-card class="assessment-info">
      <h1>营养评估</h1>
      <p><span>NRS-2002评分</span>{{ patientDesc.patientNRS }}</p>
      <p><span>MUST评分</span>{{ patientDesc.patientMUST }}</p>
      <p><span>评估日期</span>{{ detaFormater(Number(patientDesc.assessmentDate)) }}</p>
      <p><span>评估结果</span>{{ patientDesc.assessmentResult }}</p>
    </el-card>
    <!--评估信息 end-->
    <!--  操作 start-->
    <CardList :list="cardList1"/>
    <!--  操作 end-->
  </div>
</template>

<script setup>
import patientAxios from "@/api/patient.js"
import {useDataStore} from "@/stores/dataStore.js";
import {onMounted, reactive} from "vue";
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
import {detaFormater} from "@/utils/utils.js"
import CardList from "@/components/List/CardList/Index.vue"

const route = useRoute()
const router = useRouter()
const dataStore = useDataStore()
//卡片列表
const cardList = reactive([
  {
    img:'',
    title:'修改信息',
    url:'/patient/edit/'+ route.params.name
  },
  {
    img: '',
    title: '营养计划',
    url: '/plan/nutritionPlan/index/' + route.params.name
  },
])
const cardList1 = reactive([
  {
    img: '',
    title: 'NSR评估',
    url: '/assessment/NRS-2002/' + route.params.name
  },
  {
    img: '',
    title: 'MUST评估',
    url: '/assessment/MUST/' + route.params.name
  },
  {
    img:"",
    title: '智能生成',
    url: '/plan/createPlan/' + route.params.name
  },
])
//患者详情
const patientDesc = reactive({
  patientId: '',
  patientName: "",
  patientNumber: "",
  patientSex: "",
  patientAge: "",
  height: "",
  weight: "",
  disease: "",
  assessmentDate: "",
  assessmentResult: "",
  patientNRS: "",
  patientMUST: "",
  treatmentStage: "",
})
onMounted(() => {
  http_patient_findById()
})
/**
 * 查询患者详情
 */
const http_patient_findById = () => {
  patientAxios.patient_findById({
    patientId: route.params.name
  }).then(res => {
    if (res.data.code == 200) {
      patientDesc.patientId = res.data.data.patientId;
      patientDesc.patientName = res.data.data.patientName;
      patientDesc.patientNumber = res.data.data.patientNumber;
      patientDesc.patientSex = res.data.data.patientSex;
      patientDesc.patientAge = res.data.data.patientAge;
      patientDesc.height = res.data.data.height;
      patientDesc.weight = res.data.data.weight;
      patientDesc.disease = res.data.data.disease;
      patientDesc.assessmentDate = res.data.data.assessmentDate;
      patientDesc.assessmentResult = res.data.data.assessmentResult;
      patientDesc.patientNRS = res.data.data.patientNRS;
      patientDesc.patientMUST = res.data.data.patientMUST;
      patientDesc.treatmentStage = res.data.data.treatmentStage;
      patientDesc.hospitalizationStage = res.data.data.hospitalizationStage;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })
}

</script>

<style scoped lang="scss">
.container {
}

.patient-info {
  margin: 10px;
  font-family: 楷体;
  font-size: 17px;

  h1 {
    font-weight: bolder;
    margin-bottom: 5px;
  }

  h2 {
    margin-bottom: 5px;
    opacity: .6;

    span {
      margin-right: 10px;
    }
  }

  p {
    opacity: .9;
    margin-top: 10px;
    margin-bottom: 10px;

    span {
      font-weight: bolder;
      margin-right: 10px;
    }
  }

  .button {
    color: #ffffff;
  }
}

.assessment-info {
  margin: 10px;
  font-family: 楷体;
  font-size: 16px;

  h1 {
    font-weight: bolder;
    font-size: 20px;
    opacity: .8;
  }

  p {
    opacity: .8;
    margin-top: 10px;
    margin-bottom: 10px;

    span {
      font-weight: bolder;
      margin-right: 10px;
      color: #b26c6c;
    }
  }
}
</style>
